<template>
  <div class="content pure-g">
    <div class="sidebar pure-u-1-4">
      <sidebar-com
        @add-record="() => {resetDialog(); dialog.visible = true; dialog.isEdit = false}"
        @upload="onUpload"
        @download="onDownload"
      ></sidebar-com>
    </div>
    <div class="main pure-u-3-4">
      <header-com @on-refresh="onRefresh"></header-com>
      <!-- <div class="record-chart">图表区域</div> -->
      <div class="record-area">
        <h5>passwords:</h5>
        <div class="record-list pure-u-1-2">
          <div class="record-list-inner">
            <ul>
              <li v-for="record in records" :key="record.id">
                <a href="javascript:;" @click="onClickRecordItem(record)">{{record.name}}</a>
                <!-- -------- -->
                <button
                  class="btn btn-danger btn-delete-record"
                  @click="onClickRecordItemDeleteBtn(record)"
                >
                  <i class="iconfont pm-icon-shanchu"></i>
                  delete
                </button>
              </li>
            </ul>
          </div>
        </div>
        <div class="record-detail pure-u-1-2">
          <div class="record-detail__inner">
            <form class="form" v-if="recordDetailId && recordDetail">
              <div class="form-item">
                <label>name:</label>
                <input type="text" v-model="recordDetail.name" readonly>
              </div>
              <div class="form-item">
                <label>account:</label>
                <input type="text" v-model="recordDetail.account" readonly>
              </div>
              <div class="form-item">
                <label>password:</label>
                <input type="text" v-model="recordDetail.password" readonly id="curr-password">
                &nbsp;&nbsp;
                <button
                  @click.prevent
                  class="btn btn-info btn-copy-password"
                  data-clipboard-action="copy"
                  data-clipboard-target="#curr-password">copy</button>
              </div>
              <button
                class="btn btn-primary"
                @click.prevent="onClickGenNewPasswordBtn"
              >gen new password</button>
              &nbsp;&nbsp;
              <button class="btn btn-primary btn-edit" @click.prevent="onClickDetailEditBtn">
                <i class="iconfont pm-icon-bianji"></i>
                edit
              </button>
            </form>
            <div class="history-passwords" v-show="historyPasswords.length > 0">
              --------------------------------
              <h6>history passwords:</h6>
              <ul>
                <li v-for="(password, index) in historyPasswords" :key="index">{{password}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <edit-dialog
      :visible.sync="dialog.visible"
      :data="dialog.data"
      @on-confirm="onConfirmEditDialog" />
  </div>
</template>

<script>
import SidebarCom from '@/components/Sidebar.vue'
import HeaderCom from '@/components/Header.vue'
import EditDialog from '@/components/EditDialog.vue'
import ClipboardJS from 'clipboard'

import pmMinxin from '@/mixins/page-pm'

export default {
  name: 'IndexPage',
  components: {
    HeaderCom,
    SidebarCom,
    EditDialog
  },
  mixins: [pmMinxin],
  data() {
    return {
      dialog: {
        visible: false,
        data: {
          name: '',
          account: '',
          len: 16,
          type: ['number', 'char', 'punctuation']
        }
      },
      recordDetailId: ''
    }
  },
  created() {
    window.pageInstance = this
    this.init()
  },
  mounted() {
    const clipboard = new ClipboardJS('.btn-copy-password')
    clipboard.on('success', () => {
      // eslint-disable-next-line no-alert
      window.alert('copy success')
    })
  },
  methods: {
    onConfirmEditDialog(editData) {
      this.addRecord(editData)
    },
    onClickRecordItem(record) {
      this.selectItem(record)
    },
    onClickDetailEditBtn() {
      this.showDialog()
    },
    onClickRecordItemDeleteBtn(record) {
      this.deleteItem(record)
    },
    onClickGenNewPasswordBtn() {
      // TODO: max history
      this.regenPassword()
    },
    onUpload() {
      this.uploadRecords()
    },
    onDownload() {
      this.downloadRecords()
    },
    onRefresh() {
      this.refreshData(null, true)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  overflow: hidden;
  height: 100%;
  .sidebar {
    height: 100%;
  }
  .main {
    padding: 24px;
    box-sizing: border-box;
    max-height: 100vh;
  }
  .record-area {
    height: calc(100% - 120px);
  }
  .record-list {
    max-height: 100%;
    overflow: hidden auto;
    li {
      padding: 4px 0;
    }
  }
  .record-detail {
    height: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    border-left: 1px solid #ccc;
    &__inner {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .btn-delete-record {
    margin-left: 10px;
  }
}
</style>
